<template>
  <div id="app">
    <header>
      <div>任务计划列表</div>
    </header>
    <section>
      <div class="title">添加任务</div>
      <input
        type="text"
        class="form-control"
        @keyup.enter="addTask"
        placeholder="例如：吃饭睡觉"
        v-model="newTaskContent"
      />
      <nav>
        <div class="task">
          <span id="tasknum">{{ taskCount }}</span
          >个任务未完成
        </div>
        <div class="tab">
          <div class="btn-group">
            <button
              :class="{ active: filter === 'all' }"
              @click="filter = 'all'"
            >
              所有任务
            </button>
            <button
              :class="{ active: filter === 'pending' }"
              @click="filter = 'pending'"
            >
              未完成的任务
            </button>
            <button
              :class="{ active: filter === 'completed' }"
              @click="filter = 'completed'"
            >
              完成的任务
            </button>
          </div>
        </div>
      </nav>
      <div class="title">任务列表</div>
      <table class="table table-hover table-striped">
        <tbody>
          <tr v-for="item in filteredTasks" :key="item.id">
            <td>
              <input type="checkbox" v-model="item.isSelected" />
            </td>
            <td :class="{ gray: item.isSelected }">{{ item.taskContent }}</td>
            <td @click="deleteTask(item.id)">X</td>
          </tr>
        </tbody>
      </table>
    </section>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import "@/assets/bootstrap.css";

const tasks = ref([
  {
    id: 1,
    isSelected: false,
    taskContent: "测试数据",
  },
]);
const newTaskContent = ref(""); // 用于绑定输入框的值
const filter = ref("all"); // 控制显示的任务列表

// 计算没有被选中的个数（计算属性）
const taskCount = computed(
  () => tasks.value.filter((task) => !task.isSelected).length
);
// tab卡分类
const filteredTasks = computed(() => {
  switch (filter.value) {
    case "pending":
      return tasks.value.filter((task) => !task.isSelected);
    case "completed":
      return tasks.value.filter((task) => task.isSelected);
    default:
      return tasks.value;
  }
});

const addTask = () => {
  const taskContent = newTaskContent.value.trim();
  if (taskContent) {
    const newTask = {
      id: tasks.value.length + 1,
      isSelected: false,
      taskContent,
    };
    tasks.value.push(newTask);
    newTaskContent.value = ""; // 清空输入框
  }
};

const deleteTask = (id) => {
  tasks.value = tasks.value.filter((task) => task.id !== id);
};
</script>

<style lang="less">
header {
  height: 50px;
  width: 100%;
  background-color: brown;
  color: aliceblue;
  font-weight: 900;
  font-size: 22px;
  line-height: 50px;
  div {
    width: 60%;
    margin: auto;
  }
}
section {
  width: 60%;
  margin: 20px auto;
  .title {
    font-size: 20px;
    font-weight: 600;
  }

  .form-control {
    /* font-size: 18px; */
    margin-top: 10px;
  }
  nav {
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    line-height: 50px;
    .task {
      color: rgb(197, 57, 57);
    }

    button {
      height: 40px;
      background-color: rgb(255, 255, 255);
      color: rgb(96, 96, 96);
      border: 2px solid transparent;
      font-size: 18px;
      line-height: 40px;
    }
    .active {
      background-color: rgb(197, 57, 57);
      color: rgb(255, 255, 255);
    }
  }

  .table {
    margin-top: 10px;
    tr {
      .gray {
        color: rgb(159, 159, 159);
        text-decoration: line-through;
      }
      td {
        line-height: 30px;
      }
      td:nth-child(1) {
        width: 10%;
        align-items: center;
        input {
          width: 18px;
          height: 18px;
        }
      }
      td:nth-child(3) {
        font-size: 18px;
        opacity: 0;
        width: 5%;
        text-align: center;
        cursor: pointer;
        &:hover {
          color: rgb(197, 57, 57);
        }
      }
      &:hover td:nth-child(3) {
        opacity: 1;
      }
    }
  }
}
</style>
